<template>
    <div class="device-maintain-check-card-editable">
        <div class="card-content">
            <div class="check-title-box">
                <span class="check-title">
                    {{modelValue.pointinspectionname}}
                </span>
            </div>
            <div
                class="picker">
                <van-field
                    :border="false"
                    is-link
                    readonly
                    center
                    clearable
                    label="检查结果"
                    @click="showPicker = true"
                >
                    <template #button>
                        <van-button
                            block
                            size="small"
                            class="picker-button"
                            type="primary">
                            <div class="custom-button-content">
                                <wp-icon
                                    v-if="realDetailData.pointinspectionresultstatus"
                                    :name="status[realDetailData.pointinspectionresultstatus].icon"
                                    :size="18" />
                                {{realDetailData.pointinspectionresult}}
                            </div>
                        </van-button>
                    </template>
                </van-field>
                <van-popup
                    v-model:show="showPicker"
                    position="bottom">
                    <van-picker
                        :columns="columns"
                        :columns-field-names="customFieldName"
                        @confirm="onConfirm"
                        @cancel="showPicker = false"
                    >
                        <template #option="option">
                            <div style="display:flex;alignItem:center">
                                <wp-icon
                                    v-if="option.status"
                                    :name="status[option.status].icon"
                                    :size="20" />
                                <div
                                    style="maxWidth:60vw;marginLeft:5px;marginTop:-1.5px;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap;">
                                    {{option.value}}
                                </div>
                            </div>
                        </template>
                    </van-picker>
                </van-popup>
            </div>
            <div class="remark">
                <div class="remark-title">备注</div>
                <van-field
                    class="remark-text"
                    :label-width="0"
                    maxlength="200"
                    v-model="realDetailData.remark"
                    rows="3"
                    type="textarea"
                    :placeholder="$st('wp_Please_write_down_your_comment_within_200_words')"
                >
                </van-field>
            </div>
        </div>
    </div>
</template>

<script>
import WpIcon from '@/components/_wp_components/WpIcon.vue';
import { maintainCheckStatus } from '@/consts/maintaincheck.consts';
export default {
    components: {
        WpIcon
    },
    props: {
        newColumns: Array,
        modelValue: Object
    },
    emits: ['update:modelValue'],
    data () {
        return {
            showPicker: false,
            status: maintainCheckStatus,
            customFieldName: {
                text: 'value'
            }
        };
    },
    computed: {
        realDetailData: {
            get () {
                return this.modelValue;
            },
            set (val) {
                this.$emit('update:modelValue', val);
            }
        },
        columns () {
            return this.newColumns;
        }
    },
    methods: {
        onConfirm (val) {
            this.showPicker = false;
            this.realDetailData.pointinspectionresult = val.value;
            this.realDetailData.pointinspectionresultstatus = val.status;
        }
    }

};
</script>

<style lang="scss">
.device-maintain-check-card-editable{
    margin: 0 auto;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
    margin-top: 10px;
    background-color: white;
    height:205px ;
    .card-content{
        height: 150px;
        width: 90vw;
        margin:0 auto;
        padding-top: 12px;
        .check-title-box{
                display: flex;
                width: 90vw;
            .check-title{
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 17px;
                border-bottom-width: 4px;
                border-bottom-color:#BADEFF;
                border-bottom-style:solid;
            }
        }
        .picker{
            margin-top: 10px;
            .van-cell {
                padding: 0;
            }
            .van-field__label {
                font-size: 17px;
                color: black;
            }
            .picker-button{
                // height: 24px;
                font-size: 17px;
                background-color: rgb(255, 255, 255,0);
                color: black;
                border: none;
                margin-right: -15px;
                .custom-button-content{
                    // text-align: right;
                    white-space: nowrap;
                    max-width: 40vw;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
            .van-button::before{
                background-color: transparent ;
            }
             .van-icon-arrow:before {
                 z-index:auto;
                margin-top: 1px;
            }
        }
        .remark {
            font-size: 17px;
            background-color: white;
            .remark-title {
                margin-top: 10px;
            }
            .remark-text {
                margin-top: 5px;
                font-size: 15px;
                padding: 0;
                border: 0;
                width: 100%;
            }
        }

    }
}
</style>
